import { h, type VNode } from 'vue'
import {
  BoldOutlined,
  UnderlineOutlined,
  ItalicOutlined,
} from '@ant-design/icons-vue'
import { type AllComponentProps } from '@/defaultProps'
export interface PropToForm {
  component: string
  subComponent?: string
  extraProps?: { [key: string]: any }
  text?: string
  options?: { text: string | VNode; value: any }[]
  initalTransform?: (v: any) => any
  afterTransform?: (v: any) => any
  valueProp?: string
  eventName?: string
}
export type PropToForms = {
  [P in keyof AllComponentProps]?: PropToForm
}
const fontFamilyArr = [
  { text: '宋体', value: '"SimSun","STSong"' },
  { text: '黑体', value: '"SimHei","STHeiti"' },
  { text: '楷体', value: '"KaiTi","STKaiTi"' },
  { text: '微软雅黑', value: '"Microsoft YaHei"' },
  { text: '微软正黑体', value: '"Microsoft JhengHei"' },
  { text: '仿宋', value: '"FangSong", serif' },
  { text: '幼圆', value: '"YouYuan", serif' },
  { text: '隶书', value: '"LiSu", serif' },
  {
    text: '苹方',
    value: '"PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif',
  },
  { text: 'Arial', value: 'Arial' },
  { text: 'Comic Sans', value: 'Comic Sans MS' },
  { text: 'Courier New', value: 'Courier New' },
  { text: 'Times New Roman', value: 'Times New Roman' },
  { text: 'Verdana', value: 'Verdana' },
  { text: 'Courier New', value: 'Courier New' },
  { text: 'Georgia', value: 'Georgia' },
  { text: 'Palatino', value: 'Palatino' },
  { text: 'Garamond', value: 'Garamond' },
  { text: 'Bookman', value: 'Bookman' },
]
const fontFamilyOptions = fontFamilyArr.map((item) => {
  return {
    value: item.value,
    text: <span style={{ fontFamily: item.value }}>{item.text}</span>,
  }
})
const pxToNumberHandler: PropToForm = {
  component: 'a-input-number',
  initalTransform: (v: string) => (v ? parseInt(v) : 0),
  afterTransform: (e: number) => (e ? `${e}px` : ''),
}
const defaultHandler = {
  component: 'a-input',
  eventName: 'change',
  valueProp: 'value',
  intialTransform: (v: any) => v,
  afterTransform: (e: any) => e,
}
export const mapPropsToForms: PropToForms = {
  text: {
    component: 'a-textarea',
    extraProps: { rows: 3 },
    text: '文本',
    afterTransform: (v) => v.target.value,
  },
  fontSize: {
    component: 'a-input-number',
    text: '字号',
    initalTransform: (v) => parseFloat(v),
    afterTransform: (v: number) => v + 'px',
  },
  lineHeight: {
    component: 'a-slider',
    extraProps: { min: 0, max: 3, step: 0.1 },
    text: '行高',
    initalTransform: (v) => parseFloat(v),
    afterTransform: (v: number) => v.toString(),
  },
  textAlign: {
    component: 'a-radio-group',
    subComponent: 'a-radio-button',
    text: '对齐',
    options: [
      { value: 'left', text: '左对齐' },
      { value: 'center', text: '居中' },
      { value: 'right', text: '右对齐' },
    ],
    afterTransform: (v) => v.target.value,
  },
  fontFamily: {
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '字体',
    options: [{ text: '无', value: '' }, ...fontFamilyOptions],
    extraProps: {
      placeholder: '请选择字体',
    },
  },
  color: { component: 'ColorPicker', text: '颜色' },
  fontWeight: {
    component: 'icon-switch',
    initalTransform: (v) => v === 'bold',
    afterTransform: (v) => (v ? 'bold' : 'normal'),
    extraProps: {
      icon: h(BoldOutlined),
      title: '加粗',
    },
    text: '加粗',
  },
  fontStyle: {
    component: 'icon-switch',
    initalTransform: (v: string) => v === 'italic',
    afterTransform: (e: boolean) => (e ? 'italic' : 'normal'),
    extraProps: { icon: h(ItalicOutlined), title: '斜体' },
    text: '斜体',
  },
  textDecoration: {
    component: 'icon-switch',
    initalTransform: (v: string) => v === 'underline',
    afterTransform: (e: boolean) => (e ? 'underline' : 'none'),
    extraProps: { icon: h(UnderlineOutlined), title: '下划线' },
    text: '下划线',
  },
  backgroundColor: {
    component: 'color-picker',
    text: '背景颜色',
  },
  // imageComponentProps
  src: {
    component: 'image-success',
  },
  // commonComponentProps - sizes
  width: {
    text: '宽度',
    ...pxToNumberHandler,
  },
  height: {
    text: '高度',
    ...pxToNumberHandler,
  },
  paddingLeft: {
    ...pxToNumberHandler,
    text: '左边距',
  },
  paddingRight: {
    ...pxToNumberHandler,
    text: '右边距',
  },
  paddingTop: {
    ...pxToNumberHandler,
    text: '上边距',
  },
  paddingBottom: {
    ...pxToNumberHandler,
    text: '下边距',
  },
  // commonComponentProps - border type
  borderStyle: {
    ...defaultHandler,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '边框类型',
    options: [
      { value: 'none', text: '无' },
      { value: 'solid', text: '实线' },
      { value: 'dashed', text: '破折线' },
      { value: 'dotted', text: '点状线' },
    ],
  },
  borderColor: {
    ...defaultHandler,
    component: 'color-picker',
    text: '边框颜色',
  },
  borderWidth: {
    ...pxToNumberHandler,
    component: 'a-slider',
    text: '边框宽度',
    extraProps: { min: 0, max: 20 },
  },
  borderRadius: {
    ...pxToNumberHandler,
    component: 'a-slider',
    text: '边框圆角',
    extraProps: { min: 0, max: 200 },
  },
  // commonComponentProps - opacity and boxShadow
  opacity: {
    component: 'a-slider',
    text: '透明度',
    initalTransform: (v: number) => (v ? v * 100 : 100),
    afterTransform: (e: number) => (e / 100).toFixed(1),
    extraProps: { min: 0, max: 100, reverse: true },
  },
  boxShadow: {
    component: 'shadow-picker',
  },
  // commonComponentProps - positions
  left: {
    ...pxToNumberHandler,
    text: 'X轴坐标',
  },
  top: {
    ...pxToNumberHandler,
    text: 'Y轴坐标',
  },
  // commonComponentProps - actions and urls
  // actions
  actionType: {
    ...defaultHandler,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '点击',
    options: [
      { value: '', text: '无' },
      { value: 'to', text: '跳转到 URL' },
    ],
  },
  url: {
    ...defaultHandler,
    afterTransform: (e: any) => e.target.value,
    text: '链接',
  },
  backgroundImage: {
    ...defaultHandler,
    component: 'background-processer',
    initalTransform: (v: string) => {
      if (v) {
        const reg = /\(["'](.+)["']\)/g
        const matches = reg.exec(v)
        if (matches && matches.length > 1) {
          return matches[1]
        } else {
          return ''
        }
      } else {
        return ''
      }
    },
    afterTransform: (e: string) => (e ? `url('${e}')` : ''),
  },
  backgroundRepeat: {
    ...defaultHandler,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '背景重复',
    options: [
      { value: 'no-repeat', text: '无重复' },
      { value: 'repeat-x', text: 'X轴重复' },
      { value: 'repeat-y', text: 'Y轴重复' },
      { value: 'repeat', text: '全部重复' },
    ],
  },
  backgroundSize: {
    ...defaultHandler,
    component: 'a-select',
    subComponent: 'a-select-option',
    text: '背景大小',
    options: [
      { value: 'auto', text: '默认值' },
      { value: 'cover', text: '自动填充' },
      { value: 'contain', text: '自动缩放' },
    ],
  },
}
//http://47.236.137.46:3000/api/utile/uploadOSS
//http://114.55.1.185:3000/
